import { h } from "@logicflow/core";
import { RectResize } from "@logicflow/extension";

class ResizableRectModel extends RectResize.model {
  // constructor(data, graphModel) {
  //   super(data, graphModel);
  //   const { nodeSize } = this.properties;
  //   if (nodeSize) {
  //     this.width = nodeSize.width;
  //     this.height = nodeSize.height;
  //   }
  //   // this.maxWidth = 300;
  // }
  initNodeData(data) {
    super.initNodeData(data);
    this.width = 160;
    this.height = 40;
    this.maxWidth = 300;
    this.maxHeight = 100;
    this.text.draggable = true;
  }
  // setAttributes() {
  //   this.maxWidth = 200;
  //   this.maxHeight = 200;
  // }
  getNodeStyle() {
    const style = super.getNodeStyle();
    style.stroke = "#6495ED";
    style.strokeDasharray = "3 3";

    if (this.isSelected) {
      style.stroke = "red";
      style.strokeWidth = 2;
    }
    return style;
  }
  getResizeOutlineStyle() {
    const style = super.getResizeOutlineStyle();
    style.stroke = "transparent";
    return style;
  }
}

class ResizableRectView extends RectResize.view {
  getLabelShape() {
    const { model } = this.props;
    const { x, y, width, height } = model;
    const style = model.getNodeStyle();
    return h(
      "svg",
      {
        x: x - width / 2 + 5,
        y: y - height / 2 + 5,
        width: 50,
        height: 25,
        viewBox: "0 0 1274 1024"
      }
    );
  }
  getResizeShape() {
    const { model } = this.props;
    const { x, y, width, height, radius, properties } = model;
    const style = model.getNodeStyle();
    console.log(model);
    return h("g", {}, [
      h("rect", {
        ...style,
        x: x - width / 2,
        y: y - height / 2,
        rx: radius,
        ry: radius,
        width,
        height
      }),
      this.getLabelShape()
    ]);
  }
}

export default {
  type: "resizable-rect",
  view: ResizableRectView,
  model: ResizableRectModel
};